<%--
  Created by IntelliJ IDEA.
  User: yuan
  Date: 2020/12/5
  Time: 18:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网站流量实时可视化</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"> </script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"> </script>
    <script type="text/javascript">
        window.onload=function (){
            myChart = echarts.init(document.getElementById('main'));

            pvArr=[]
            uvArr=[]
            vvArr=[]
            newipArr=[]
            newcustArr=[]
            xtimeArr=[]
            window.setInterval(function (){
                $.get("http://localhost:8080/DataView",function (datax){
                    if(pvArr.length>7){
                        pvArr.shift()
                        uvArr.shift()
                        vvArr.shift()
                        newipArr.shift()
                        newcustArr.shift()
                        xtimeArr.shift()
                    }
                    pvArr.push(eval(datax)[0])
                    uvArr.push(eval(datax)[1])
                    vvArr.push(eval(datax)[2])
                    newipArr.push(eval(datax)[3])
                    newcustArr.push(eval(datax)[4])
                    xtimeArr.push(eval(datax)[5])

                    option = {
                        legend:{
                            data:['pv','uv','vv','mewip','newcust']
                        },
                        xAxis: {
                            type: 'category',
                            data: xtimeArr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'pv',
                            data: pvArr,
                            type: 'line',
                            smooth: true
                        },{
                            name:'uv',
                            data: uvArr,
                            type: 'line',
                            smooth: true
                        },{
                            name:'vv',
                            data: vvArr,
                            type: 'line',
                            smooth: true
                        },{
                            name:'newip',
                            data: newipArr,
                            type: 'line',
                            smooth: true
                        },{
                            name:'newcust',
                            data: newcustArr,
                            type: 'line',
                            smooth: true
                        }]
                    };
                    myChart.setOption(option);
                })
            },200)




        }
    </script>
</head>
<body>
    <div id="main" style="width: 800px;height: 600px;"></div>
</body>
</html>
